<template>
	<view>
		<uni-nav-bar fixed="true" leftWidth="400rpx" height="120rpx" statusBar="true" backgroundColor="#6869a8"
			color="white">
			<view class="head" slot="left" @click="personal">
				<image :src="avatar" class="avatar" mode="aspectFill"></image>
				<text class="username">
					{{ username }}
				</text>
			</view>
			<view class="plus target" slot="right" @click="select">
				<uni-icons type="plusempty" size="30" color="white"></uni-icons>
			</view>
		</uni-nav-bar>
		<!-- <view> -->
		<!-- 			<view class="" @click="search()">
				<view class="search">
					<uni-icons customPrefix="iconfont" type="icon-search" color="#B2B4C0" size="17"></uni-icons>
					搜索
				</view>
			</view> -->
		<view class="">
			<uni-swipe-action :key="timer">
				<uni-swipe-action-item :right-options="options" v-for="(chat,index) in chatList" :key="index"
					@click="delete_chat(index)">
					<uni-list :border="false">
						<uni-list-chat v-if="'user' in chat" class="chat_list" :title="chat.user.username"
							:key="chat.user.id" :note="getLatestMessage(chat)" :time="getLatestDate(chat)"
							:badge-text="chat.unRead" :avatar="chat.user.avatar" link
							@click="chatWindow(chat.user.id,chat.user.username,index)">
						</uni-list-chat>
						<uni-list-chat v-if="'group' in chat" class="chat_list" :title="chat.group.groupName"
							:key="chat.group.id" :note="getLatestMessage(chat)" :time="getLatestDate(chat)"
							:badge-text="chat.unRead" :avatar="chat.group.avatar" link
							@click="groupWindow(chat.group.id,chat.group.groupName,index)"></uni-list-chat>
					</uni-list>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<!-- </view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '../../static/logo.png',
				username: '',
				// chatList:null
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
			}
		},
		mounted() {
			uni.$on("repeat", () => {
				this.$store.commit("logout")
				uni.navigateTo({
					url: "../mask/mask",
					animationType: "fade-in"
				})
			})
		},
		computed: {
			chatList() {
				let unread = this.total_unread
				// console.log(unread)
				if (unread > 0) {
					uni.setTabBarBadge({
						index: 0,
						text: unread.toString()
					})
				} else {
					uni.removeTabBarBadge({
						index: 0
					})
				}
				return this.$store.state.chatList
			},
			total_unread() {
				let sum = 0
				for (let i = 0; i < this.$store.state.chatList.length; i++) {
					sum += this.$store.state.chatList[i].unRead;
				}
				return sum;
			},
			timer() {
				return this.$store.state.timer;
			}
		},
		methods: {
			//搜索界面
			search() {
				uni.navigateTo({
					url: '../search/search',
				})
			},
			//查看个人资料
			personal() {
				uni.navigateTo({
					url: "../personal/personal"
				})
			},
			//进入聊天窗口
			chatWindow(id, name, index) {
				let self = this
				uni.navigateTo({
					url: "../chatWindow/chatWindow?id=" + id + "&name=" + name,
					success() {
						self.$store.commit("clearUnread", index)
					}
				})
			},
			groupWindow(id, name, index) {
				let self = this
				uni.navigateTo({
					url: "../groupChat/groupChat?gid=" + id + "&groupName=" + name,
					success() {
						self.$store.commit("clearUnread", index)
					}
				})
			},
			//选择创建群聊,或添加好友
			select() {
				const that = this
				uni.showActionSheet({
					itemList: ['创建群聊', '加好友/群'],
					popover: {},
					success: (e) => {
						// console.log(e.tapIndex);
						if (e.tapIndex === 1) this.search()
						if (e.tapIndex === 0) {
							uni.navigateTo({
								url: "../createGroup/createGroup"
							})
						}
					}
				})
			},
			//删除聊天列表项
			delete_chat(index) {
				// console.log("delete")
				this.$store.commit("deleteChat", index)
			},
			//获取最新消息的data
			getLatestMessage(chat) {
				// console.log(chat)
				let len = chat.messageList.length
				if (len === 0) return
				if (chat.messageList[len - 1].messageType == 1 || chat.messageList[len - 1].messageType == 3)
					return chat.messageList[len - 1].data;
				else if (chat.messageList[len - 1].messageType == 2 || chat.messageList[len - 1].messageType == 4)
					return "[图片]";
			},
			//获取最新消息的发送时间
			getLatestDate(chat) {
				let len = chat.messageList.length
				if (len === 0) return
				return this.$util.convertTime(chat.messageList[len - 1].sendDate);
			}
		},
		onShow() {
			this.avatar = this.$store.state.userInfo.avatar
			// this.$store.commit("initLoginState", this.$socket)
			this.username = this.$store.state.userInfo.username
		}
	}
</script>

<style scoped>
	.username {
		padding-left: 15rpx;
		font-size: 35rpx;
	}

	.head {
		display: flex;
		align-items: center;
	}

	.avatar {
		margin-left: 15rpx;
		height: 60rpx;
		width: 60rpx;
		border-radius: 10rpx;
	}

	.addIcon {
		float: right;
		right: 20rpx;
	}


	.messageList {
		display: flex;
		height: 140rpx;
		border-bottom: 1rpx #e3e3e3 solid;
		line-height: 140rpx;
		align-items: center;
	}

	.messageAvatar {
		margin-left: 35rpx;
		border-radius: 15rpx;
		height: 100rpx;
		width: 100rpx;
	}

	.messageName {
		padding-left: 35rpx;
	}

	.search {
		height: 60rpx;
		line-height: 60rpx;
		margin: 20rpx 40rpx;
		text-align: center;
		background-color: #F5F5F5;
		font-size: 30rpx;
		color: #B2B4C0;
	}

	.chat_list {
		height: 135rpx;

	}
</style>
